import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController} from 'ionic-angular';
declare var BMap;
//declare var BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW;
declare var BMAP_ANCHOR_BOTTOM_RIGHT;
declare var BMAP_ANCHOR_TOP_LEFT;
declare var  BMAP_ANCHOR_TOP_RIGHT;
@Component({
  selector: 'map-page',
  templateUrl: 'mappage.html'
})
export class MapPage {
  public map: any;
  tabBarElement: any;
  @ViewChild('Mapself') mapElement: ElementRef;
  constructor(
    public navCtrl: NavController,
    //private platform: Platform
  ) {
    if (document.querySelector('.tabbar')) {
      this.tabBarElement = document.querySelector('.tabbar.show-tabbar');
    }

  }
  ionViewDidLoad() {
    let map = this.map = new BMap.Map(this.mapElement.nativeElement, { enableMapClick: true });//创建地图实例
    let geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition((position) => {
      //0代表调用成功，具体状态可见百度地图api
      if (geolocation.getStatus() == 0) {
        //经度
        let longitude = position.longitude;
        //纬度
        let latitude = position.latitude;
        longitude=parseFloat(longitude);
        latitude=parseFloat(latitude);
        longitude=longitude+0.169
        latitude=latitude-0.00511
        var point = new BMap.Point(longitude,latitude);//34.7534880000,113.6313490000 120.78821,31.312896
        map.enableScrollWheelZoom();//启动滚轮放大缩小，默认禁用
        map.enableContinuousZoom();//连续缩放效果，默认禁用
        map.centerAndZoom(point, 15);
        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);
        //地图放大缩小控件
        let sizeMap = new BMap.Size(10, 80);//显示位置
        map.addControl(new BMap.NavigationControl({
          anchor: BMAP_ANCHOR_BOTTOM_RIGHT,//显示方向
          offset: sizeMap
        }));

        //3D效果矢量图控件
        let size3D = new BMap.Size(10, 10);
        map.addControl(new BMap.MapTypeControl({
          anchor: BMAP_ANCHOR_TOP_LEFT,
          offset: size3D
        }));
        map.setCurrentCity("苏州");//3D效果需要设置城市

        //城市列表控件
        let sizeCity = new BMap.Size(10, 10);
        map.addControl(new BMap.CityListControl({
          anchor: BMAP_ANCHOR_TOP_LEFT,
          offset: sizeCity
        }))
      }
    });
    function showAttractionControl() {
      //定义显示位置
      this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
      this.defaultOffset = new BMap.Size(10, 30);
    }
    //初始化控件
    showAttractionControl.prototype = new BMap.Control();
    showAttractionControl.prototype.initialize = function (map) {
      let div = document.createElement("button");// 创建一个按钮
      div.appendChild(document.createTextNode("附近景点"));
      div.style.width = "135px";
      div.style.height = "35px";
      div.style.borderRadius = "15px";
      div.onclick = function (e) {
        let local = new BMap.LocalSearch(map, {
          renderOptions: { map: map, autoViewport: true }
        });
        local.search("景点");
      }
      map.getContainer().appendChild(div);// 添加DOM元素到地图中
      return div;
    }
    let showAttraction = new showAttractionControl();
    map.addControl(showAttraction);//添加控件
  }

  ionViewWillEnter() {
    if (this.tabBarElement) {
      this.tabBarElement.style.display = 'none';
    }
  }
  
  ionViewWillLeave() {
    if (this.tabBarElement) {
      this.tabBarElement.style.display = 'flex';
    }
  }
}